<template>
  <div class="IsText">
    <div class="text" :style="fontStyle">{{ words }}</div>
  </div>
</template>

<script>
export default {
  name: 'IsText',
  props: {
    datas: Object
  },
  computed: {
    words() {
      return this.datas.words
    },
    fontStyle() {
      const font = this.datas.font
      const box = this.datas.box
      return {
        color: font.color,
        'font-family': font.family,
        'font-weight': font.weight,
        'font-style': font.italic,
        'text-decoration': font.decoration,
        'text-align': font.align,
        'font-size': font.size + 'px',
        'line-height': font.height + 'px',
        'letter-spacing': font.spacing + 'px',
        'text-shadow': `${box.shadow.h}px ${box.shadow.v}px ${box.shadow.blur}px ${box.shadow.color}`
      }
    }
  },
  mounted() {
    const box = this.datas.box
    console.log(
      `${box.shadow.h}px ${box.shadow.v}px ${box.shadow.blur}px ${box.shadow.color}`
    )
  }
}
</script>

<style lang="scss" scoped>
.IsText {
  .text {
    border: 1px solid red;
    width: 100%;
    height: 100%;
  }
}
</style>
